<html>
  <head>
	<title>CBCS Employee Survey 2015</title>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
	  
	<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Roboto+Slab:400,700|Tangerine:400,700">
	<style>
	.ss-form-title {
	  font-family: "Tangerine";
	  color: rgb(86,42,8);
	  font-weight: 700;
	  font-size: 2.460rem;
	  font-style: normal;
	  text-align: center;
	}
	.ss-q-title {
	  font-family: "Roboto Slab";
	  color: rgb(86,42,8);
	  font-weight: 700;
	  font-size: 1.080rem;
	  font-style: normal;
	}
	* {
	  box-sizing: border-box;
	}
	.ss-menu {
	  font-family: "Roboto Slab";
	  color: rgb(86,42,8);
	  font-weight: 400;
	  font-size: 0.8rem;
	  font-style: normal;
	  margin-top: 20px;
	  width: 90%;
      margin: 20px auto;
	}
	.ss-menu ul {
		list-style-type: none;
		margin: 0;
		padding: 0;
		overflow: hidden;
	}
	.ss-menu ul li {
		display: inline;
  		text-align: center;
	}
	.ss-menu ul li a:link, a:visited {
		display: inline-block;
		width: 15%;
		font-weight: bold;
		color: #FFFFFF;
		background-color: #98bf21;
		text-align: center;
		padding: .75rem 0;
		text-decoration: none;
		text-transform: uppercase;
	}
	.ss-menu ul li a:hover, a:active {
		background-color: #7A991A;
	}
	.current-page {
		border-bottom: 3px solid tomato;
	}
		
	</style>
    <script type="text/javascript">
	function getURLParameter(name) {
 		return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[,""])[1].replace(/\+/g, '%20'))||null
	}
	// Load the Visualization API and the piechart package.
	google.load('visualization', '1.0', {'packages':['corechart']});
	
	// Set a callback to run when the Google Visualization API is loaded.
	google.setOnLoadCallback(layoutReport);

	// Callback function that initiates the report layout 
	function layoutReport() {
		var dept = getURLParameter('gr');
		if (dept == undefined) dept = 0;
		
		// Ranges (all, Upper School, Grammar, EC, Staff, Dept Head)
		var ranges = ["A2:BT7", "A11:BT16", "A20:BT25", "A29:BT34", "A38:BT43", "A47:BT52"];
		var range = ranges[dept];
		//var range = 'A2:BT7';
		var sheet = '1770803386';
		var url = 'https://docs.google.com/spreadsheets/d/1ztEBH3dxd_5SE1tM_u_4z7CAdtWZgiLdIO4e_WCVXw4/gviz/tq?gid=' + sheet + '&header=1&range=' + range;
		var query = new google.visualization.Query(url);
		query.send(handleQueryResponse);
			
		// Update menu link decoration
		for (i=0; i<6; i++) {
			if (i==dept) {
				document.getElementById('dept'+i).className = 'current-page';
			} else {
				document.getElementById('dept'+i.toString()).className = '';
			}
		}
	}	

	function handleQueryResponse(response) {
		// Create the data table.
		if (response.isError()) {
			alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
			return;
		}
		
		var data = response.getDataTable();
		var cols = data.getNumberOfColumns();
		for (var num = 1; num < cols; num++) {
			initElements(num);
			drawChart(data, num);
		}
	}
		
	function initElements(num){
		var container = document.getElementById('container');
		
		var itemRow = document.createElement('div');
		itemRow.style.marginLeft = '20px';
		container.appendChild(itemRow);
		
		var titleNode = document.createElement('div');
		titleNode.id = 'title-' + num.toString();
		titleNode.className = 'ss-q-title';
		titleNode.style.marginTop = '20px';
		itemRow.appendChild(titleNode);
		
		var barChart = document.createElement('div');
		barChart.id = 'bar-chart-' + num.toString();
		var pieChart = document.createElement('div');
		pieChart.id = 'pie-chart-' + num.toString();
		
		var table = document.createElement('table');
		table.style.borderTop = 'thin solid #001f3f';
		table.style.marginTop = '5px';
		table.style.marginBottom = '20px';
		var row = document.createElement('tr');
		var cell1 = document.createElement('td');
		cell1.appendChild(barChart);
		var cell2 =  document.createElement('td')
		cell2.appendChild(pieChart);
		row.appendChild(cell1);
		row.appendChild(cell2);
		table.appendChild(row);
		itemRow.appendChild(table);
	}
		
	// Creates and populates a data table,
	// instantiates the pie chart, passes in the data and draws it.
	function drawChart(data, num) {	
		// Set the colors of the bars
		var colors = ['#0074D9', '#3D9970', '#2ECC40', '#FF851B', '#FF4136'];
		var view = new google.visualization.DataView(data);
		var row = 0;
		cellColor = function() {return colors[row++]};
		view.setColumns([0, num, { calc: "stringify",
                         sourceColumn: num,
                         type: "string",
                         role: "annotation" }, 
						 { calc: cellColor,
                         sourceColumn: num,
                         type: "string",
                         role: "style" }]);
		
		var barChart = new google.visualization.BarChart(document.getElementById('bar-chart-'+num.toString()));
		var barChartOptions = {
			width: 600,
			height: 400,
			//title: data.getColumnLabel(1),
			legend: 'none'
		};
		barChart.draw(view, barChartOptions);
		
		var pieChart = new google.visualization.PieChart(document.getElementById('pie-chart-'+num.toString()));
		var pieChartOptions = {
			width: 500,
			height: 400,
			legend: {
				position: 'right',
				alignment: 'center'
			},
			slices: { 0: { color:colors[0]}, 1: {color:colors[1]}, 2: {color:colors[2]}, 3:{color:colors[3]}, 4: {color:colors[4]} }
		};
		pieChart.draw(view, pieChartOptions);
		
		document.getElementById('title-'+num).textContent = data.getColumnLabel(num); 
	}
    </script>
  </head>

  <body>
	  <div class='ss-form-title'>
		  CBCS Employee Survey 2015
	  </div>
	  <div class='ss-menu'>
		  <ul>
			  <li><a id='dept0' href='all.chart.html?gr=0'>All</a></li>
			  <li><a id='dept1' href='all.chart.html?gr=1'>Upper School</a></li>
			  <li><a id='dept2' href='all.chart.html?gr=2'>Grammar School</a></li>
			  <li><a id='dept3' href='all.chart.html?gr=3'>Early Childhood</a></li>
			  <li><a id='dept4' href='all.chart.html?gr=4'>Staff</a></li>
			  <li><a id='dept5' href='all.chart.html?gr=5'>Dept. Head</a></li>
		  </ul>
	  </div>
    <!--Div that will hold the chart-->
	  <div id="container"></div>
  </body>
</html>